<template>
	<div class="page-content">
		<div class="page-title">
			请选择准驾车型
			<div style="float: right;">
				<Timer title="选择驾照类型"></Timer>
			</div>
		</div>
		
		<div style="height: 620px; background-color: #f8f9fb; padding: 40px; "  >
			
			<div class="keyboard" style="" @mousedown="clickCarType">
				 <div class="keyboard-row">
					 <button class="key c1" style="height: 200px;" data-car='C1'>C1</button>
					 <button class="key c2" style="height: 200px;" data-car='C2'>C2</button>
				 </div>
				 <div class="keyboard-row">
					 <button class="key2 b2" data-car='A1'>
						<div data-car='A1'>A 1</div>
						<div data-car='A1' class="top2">大型客车</div>
					 </button>
					 <button data-car='A2' class="key2 b2">
						 <div data-car='A2'>A 2</div>
						 <div data-car='A2' class="top2">牵引车</div>
					 </button>
					 <button data-car='B1' class="key2 b2">
						 <div data-car='B1'>B 1</div>
						 <div data-car='B1' class="top2">中型客车</div>
					 </button>
					 <button data-car='B2' class="key2 b2">
						 <div data-car='B2'>B 2</div>
						 <div data-car='B2' class="top2">大型货车</div>
					 </button>
					 <button data-car='E' class="key2 b2">
						 <div data-car='E'>E</div>
						 <div data-car='E' class="top2">普通二轮摩托车</div>
					 </button>
				 </div>
				 <div class="keyboard-row">
					 <button data-car='A3' class="key2 b2">
						 <div data-car='A3'>A 3</div>
						 <div data-car='A3' class="top3">城市公交车</div>
					 </button>
					 <button data-car='C3' class="key b3">
						 <div data-car='C3'>C 3</div>
						 <div data-car='C3' class="top3">低速载货汽车</div>
					 </button>
					 <button data-car='C4' class="key  b3">
						 <div data-car='C4'>C 4</div>
						 <div data-car='C4' class="top3">三轮汽车</div>
					 </button>
					 <button data-car='D' class="key  b3">
						 <div data-car='D'>D</div>
						 <div data-car='D' class="top3">普通三轮摩托车</div>
					 </button>
					 <button data-car='F' class="key  b3">
						 <div data-car='F'>F</div>
						 <div data-car='F' class="top3">轻便摩托车</div>
					 </button>
					 <button data-car='M' class="key  b3">
						 <div data-car='M'>M</div>
						 <div data-car='M' class="top3">轮式自行机械车</div>
					 </button>
					 <button data-car='N' class="key  b3">
						 <div data-car='N'>N</div>
						 <div data-car='N' class="top3">无轨电车</div>
					 </button>
					 <button data-car='P' class="key  b3">
						 <div data-car='P'>P</div>
						 <div data-car='P' class="top3">有轨电车</div>
					 </button>
				 </div>
			</div>
		</div>
		 
		<div style="height: 129px;" >
			<a class="btn-big" @click="saveCarTypes">
				确 定
			</a>
		</div>
		
	</div>
</template>

<script>
	export default{ 
		data(){
			return {
				carTypes:'',
				buttons:[],
			}
		},
		
		methods:{
			clickCarType(event){
				let btn = event.target;
				if(btn.tagName.toLowerCase() != 'button')
					btn = event.target.parentElement;
				
				if(btn.tagName.toLowerCase() != 'button')
					return;
				
				this.buttons.forEach((button)=>{
					button.classList.remove('active');
				})
				this.buttons.length = 0;
				btn.classList.add('active');
				this.buttons.push(btn);
				let num = btn.getAttribute('data-car');
				if(num){
					this.carTypes = num;
					console.log("选择: " + num);
				} 
			},
			
			saveCarTypes(){ 
				if(this.carTypes == ''){
					this.toast("请选择准驾车型.");
					return;
				}
				const carTypes = this.carTypes;
				this.send({name:'SaveCarTypes', carTypes, remark:'保存准驾车型', next:'/check/input/promise'});
			}
		}
	}
</script>

<style scoped="">
	.keyboard{
		border:solid 2px #adbac3; height:521px;  width:1200px; border-radius: 20px;
		display: flex; flex-flow: column; 
	}
	
	.keyboard-row{
		padding: 0.5rem; 
		flex:1;
		display: flex;
	}
	.key{
		width:30%; 
		margin:6px;
		flex:1;
		background-color: #eee;
		border-radius: 10px;
		border:solid 2px #1268F9;
		font-size: 32px;
	}
	.key2{
		width:30%; 
		margin:6px;
		flex:1;
		background-color: #eee;
		border-radius: 10px;
		border:solid 2px #FBC121;
		font-size: 32px;
	}
	.c1{
		color: #eee;
		background: url(../../../public/res/input/C1.png);
	}
	.c1.active{
		color: #1268F8;
		background: url(../../../public/res/input/C1.2.png);
	}
	.c2{
		color: #eee;
		background: url(../../../public/res/input/C2.png);
	}
	.c2.active{
		color: #1268F8;
		background: url(../../../public/res/input/C2.2.png);
	}
	.b2{
		background-color: #e7eef4;
		border: 2px solid #FBC121;
	}
	.b2.active{
		background-color: #FBC121;
		color: #fff;
		border-color: #FBC121;
	}
	.b3{
		background-color: #e7eef4;
		border: 2px solid #1268F9;
	}
	.b3.active{
		background-color: #1268F9;
		color: #fff;
		border-color: #1268F9;
	}
	.top2{
		font-size: 22px;
		margin-top: 10px;
	}
	.top3{
		font-size: 16px;
		margin-top: 10px;
	}
</style>
